<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/index/css/style.css"/>
    <script type="text/javascript" src="__STATIC__/index/js/rem.js"></script>
    <link rel="stylesheet" type="text/css" href="__STATIC__/index/css/swiper.min.css"/>
    <title>门店</title>
</head>
<body>
<div class="store">
    <!--轮播-->
    <!--banner-->
    <div class="banner">
        <div class="swiper-container" id="swiper">
            <div class="swiper-wrapper">
                {foreach $slider as $vo}
                <div class="swiper-slide">
                    <img class="auto-img" src="{$vo.thumb}"/>
                </div>
                {/foreach}
            </div>
            <!--分页器-->
            <div class="swiper-pagination"></div>
        </div>
        <!--搜索框-->
        <div class="search-box">
            <label>
                <input id="search" type="search" name="" placeholder="运动镜" onkeydown="enterSearch(event)"/>
            </label>
        </div>
    </div>

    <div class="content" style="margin-bottom: 1.21rem">
        <!--选择眼镜类型-->
        <div class="glasses_type">
            <ul class="type_list clear">
                {foreach $cate as $c}
                <a href="">
                    <li style="width: 25%;padding: 0.33rem 0">
                        <img style="display: block;margin:0 auto 0.3rem" src="{$c.cate_url}" alt="">
                        <p class="text-center normall-text">{$c.cate_title}</p>
                    </li>
                </a>
                {/foreach}
            </ul>
        </div>

        <!--门店推荐-->
        <div class="store_recommend">
            <!--标题-->
            <div class="recommend_tit clear">
                <p class="fl super-text">门店推荐</p>
                <a href="goods"><p class="brown normall-text fr bold">更多 <i class="arrow"></i></p></a>
            </div>
            <!--主体-->
            <div class="recommend_list">
                <ul class="list clear">
                    {foreach $goods as $g}
                    <a href="detail?id={$g.id}">
                        <li>
                            <!--图片-->
                            <div class="recommend_img">
                                <img class="auto-img" lay-src="{$g.goods_logo}"/>
                            </div>
                            <!--描述-->
                            <div class="des text-center">
                                <p class="bigger-text smoth">{$g.goods_title}</p>
                                <p class="recommend_money">
                                    <span class="super-text brown in-lineblock">￥{$g.price_one}</span>
                                    <s class="in-lineblock">￥{$g.price_two}</s>
                                </p>
                            </div>
                        </li>
                    </a>
                    {/foreach}
                </ul>
            </div>
        </div>
    </div>


    <!--底部tabs-->
    <div class="nav-tabs">
        <ul class="nav-list clear">
            <a href="javascript:;">
                <li>
                    <i class="home-selected"></i>
                    <p class="text-center normall-text on">首页</p>
                </li>
            </a>
            <a href="/index/cart/index">
                <li>
                    <i class="shopcart"></i>
                    <p class="text-center normall-text">购物车</p>
                </li>
            </a>
            <a href="./query_data.html">
                <li>
                    <i class="query"></i>
                    <p class="text-center normall-text">配镜查询</p>
                </li>
            </a>
            <a href="/index/user/index">
                <li>
                    <i class="mine"></i>
                    <p class="text-center normall-text">我的</p>
                </li>
            </a>
        </ul>
    </div>
</div>
<script type="text/javascript" src="__STATIC__/index/js/swiper.min.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="__STATIC__/plugs/layui/layui.all.js"></script>
<script type="text/javascript">
    window.onload = function () {
        var swiper = new Swiper('#swiper', {
            autoplay: true,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
                clickable: true
            }
        })
    }

    function enterSearch(event) {
        $('#search').bind('search', function () {
            var value = $('#search').val();//输入的关键字的值
            if (event.keyCode == 13) {
                window.location.href = encodeURI('search.html?key=' + value)//跳转页面的关键字
            }
        })
    }


    layui.use('flow', function(){
        var flow = layui.flow;
        //当你执行这样一个方法时，即对页面中的全部带有lay-src的img元素开启了懒加载（当然你也可以指定相关img）
        flow.lazyimg();
    });




    //切换选择眼镜类型
    // $('.glasses_type .type_list li').on('click',function(){
    // 	$(this).addClass('on').siblings().removeClass('on')
    // 	if ($(this).children('i').hasClass('glasses_1')) {//选择类型1
    // 		$(this).children('i').addClass('glasses-selected_1')
    // 		$(this).siblings().find('i').removeClass('glasses-selected_2')
    // 		$(this).siblings().find('i').removeClass('glasses-selected_3')
    // 		$(this).siblings().find('i').removeClass('glasses-selected_4')
    // 	}else if ($(this).children('i').hasClass('glasses_2')) {//选择类型2
    // 		$(this).children('i').addClass('glasses-selected_2')
    // 		$(this).siblings().find('i').removeClass('glasses-selected_1')
    // 		$(this).siblings().find('i').removeClass('glasses-selected_3')
    // 		$(this).siblings().find('i').removeClass('glasses-selected_4')
    // 	}else if ($(this).children('i').hasClass('glasses_3')) {//选择类型3
    // 		$(this).children('i').addClass('glasses-selected_3')
    // 		$(this).siblings().find('i').removeClass('glasses-selected_1')
    // 		$(this).siblings().find('i').removeClass('glasses-selected_2')
    // 		$(this).siblings().find('i').removeClass('glasses-selected_4')
    // 	}else if ($(this).children('i').hasClass('glasses_4')) {//选择类型4
    // 		$(this).children('i').addClass('glasses-selected_4')
    // 		$(this).siblings().find('i').removeClass('glasses-selected_1')
    // 		$(this).siblings().find('i').removeClass('glasses-selected_2')
    // 		$(this).siblings().find('i').removeClass('glasses-selected_3')
    // 	}
    // })
</script>
</body>
</html>